<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<center>
    <div id="app">
        <input type="text" v-model="msg">
        <br>
        <!--<h1>{{msg}}</h1>-->

        <input type="text" v-model="msg">

        <br>
        <hr>
        <input type="text" v-model="bool">

        <!--条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示。-->
        <h1 v-if="flag == 1">男</h1>
        <h1 v-else>女</h1>

        <hr>

        <h2 v-if="city == 'A'">北京</h2>
        <h2 v-else-if="city == 'B'">上海</h2>
        <h2 v-else-if="city == 'C'">广州</h2>
        <h2 v-else>未知城市</h2>
    </div>

</center>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
            da: "条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示",
            bool: false,
            flag: 2,
            city: "D"
        }
    });
</script>

</html>